<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
<!--	<script th:src="@{js/jquery-3.5.1.min.js}"></script>-->
	<script src="../js/jquery-3.5.1.min.js"></script>
	<body>
		<h2 style="margin: 0 auto; width: 500px"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空气质量检测系统</h2>
		<div id="head" style=" margin: 0 auto; width: 500px">
			<span>按照区域查询</span>
			<select id="nav">
				<option  th:each="dis:${dis}" th:value="${dis.id}" th:text="${dis.name}"></option>
			</select>
			<button id = "find" >查找</button>
			
			&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#" th:href="@{/air/toadd}">添加空气质量信息</a>
		</div>
		<div id = "body" style="display: block; margin: 0 auto; width: 50%;">
			<table cellspacing="0" style="width: 500px"  id = "tb">
				<tr>
					<th style="width: auto">序号</th>
					<th style="width: auto">区域</th>
					<th style="width: auto">检测时间</th>
					<th style="width: auto">pm10数据</th>
					<th style="width: auto">PM2.5数据</th>
					<th style="width: auto">检测站</th>
				</tr>
				<tr th:each="air:${air}">
					<th th:text="${air.id}"></th>
					<th th:text="${air.districtName}"></th>
					<th th:text="${#dates.format(air.monitorTime,'yyyy-MM-dd')}"></th>
					<th th:text="${air.pm10}"></th>
					<th th:text="${air.pm25}"> </th>
					<th th:text="${air.monitoringStation}"></th>
				</tr>
			</table>
		</div>

		<script type="text/javascript">
			$(function(){
				$("#find").click(function(){
					var val = $("#nav").val();
					$.ajax({
						url:'[[@{/air/find}]]',
						data:{id:val},
						type:'get',
						dataType:'json',

						success:function(data){
							var tt = "<tr><th>序号</th><th>区域</th><th>检测时间</th><th>pm10数据</th><th>PM2.5数据</th><th>检测站</th></tr>";
							for(var i = 0;i<data.length;i++){
								// alert(data[i].id);
							 	tt+="<tr><th>"+data[i].id+"</th>"
							 	+'<th>'+data[i].districtName+'</th>'
							 	+'<th>'+data[i].monitorTime+'</th>'
							 	+'<th>'+data[i].pm10+'</th>'
							 	+'<th>'+data[i].pm25+'</th>'
							 	+'<th>'+data[i].monitoringStation+'</th></tr>';
							}
							$("#tb").html(tt);
						}
					})
				});
			});
		</script>
	</body>
</html>
